<script>
import Banner from "@/components/banner.vue";

export default {
  name: "Login",
  components: {Banner},
  data() {
    return {
      form: {
        checkCode: '',
        username: '',
        password: ''
      }
    }
  },
  methods: {
    Login() {
      window.localStorage.setItem('token', '123')
      this.$router.push('/')
      this.$message.success('登錄成功')
      location.reload();
    },
    Register() {
      this.$router.push('/register')
    }
  }
}
</script>

<template>
  <div class="wrapper">
    <banner isHome="true"></banner>
    <div class="site-content animate">
      <h1 style="margin-bottom: 40px;text-align: center;font-size: 30px">用戶登錄(暂时还没做接口，直接点登录即可)</h1>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用戶名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密碼">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="驗證碼">
          <el-input class="check_code" v-model="form.checkCode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Login">登錄</el-button>
          <el-button @click="Register">立即注冊</el-button>
          <el-button type="warning" @click="Register">忘記密碼？</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="less">
.check_code {
  width: 150px;
}
.site-content {
  padding-bottom: 90px;
  .notify {
    margin: 60px 0;
    border-radius: 3px;

    & > div {
      padding: 20px;
    }
  }


  .search-result {
    padding: 15px 20px;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    border: 1px dashed #ddd;
    color: #828282;
  }
}

@media (max-width: 800px) {
  .top-feature {
    display: none;
  }

  .site-main {
    padding-top: 40px;
  }

  .site-content {
    .notify {
      margin: 30px 0 0 0;
    }

    .search-result {
      margin-bottom: 20px;
      font-size: 16px;
    }
  }
}
</style>
